// components/zgMarquee/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: "由于由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值由于query查询的方法不是同步的，此处需要暂停才能获取到值"
    },

  },
  lifetimes: {
    attached: function () {
      let that = this;
      var lenWidth
      const query = wx.createSelectorQuery().in(this);
      query.select('#mar-text').boundingClientRect(function (res) {
        lenWidth = res.width;
      }).exec();
      // 由于query查询的方法不是同步的，此处需要暂停才能获取到值
      setTimeout(function () {
        //计算时间，避免不同机器体验相差太多
        let timeT =Math.ceil(lenWidth/wx.getSystemInfoSync().windowWidth)* 5000
        //创建动画实例
        var animation = wx.createAnimation({
          //此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
          duration: timeT,
          timingFunction: 'linear'
        });
        //偏移距离为公告内容的长度*字体大小（若字体大小使用rpx需要换算成px）
        animation.left(-lenWidth).step();
        that.setData({
          animationData: animation.export()
        });
        // 循环播放动画关键步骤（使用两个定时器）
        // 第一个定时器：将字幕恢复到指定位置
        that.t1 = setInterval(function () {
          animation = wx.createAnimation({
            timingFunction: 'linear'
          });
          animation.left('100%').step({
            duration: 0
          });
          that.setData({
            animationData: animation.export()
          });
          setTimeout(function (){
            animation.left(-lenWidth).step({
              duration: timeT
            });
            that.setData({
              animationData: animation.export()
            });
          },100);
        }.bind(that), timeT +100);
      }, 300);
    }

  },
  /**
   * 组件的初始数据
   */
  data: {
    mWith: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})